<!-- Search Page -->

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header" ng-include="'app-navbar-header.html'"></div>
        <div deepdive-search-bar for="search"></div>
    </div>
</nav>
<style>body { padding-top: 70px; }</style>


<!-- Search results -->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2 col-md-3 affix sidebar">
            <!-- faceted search with aggregations -->
            <div ng-repeat="(field, agg) in search.results.aggregations" ng-if="agg.buckets.length > 0">
                <h4 data-toggle="collapse" data-target="#facets-{{field | safeId}}"
                    aria-expanded="true" aria-controls="facets-{{field | safeId}}">{{field}}</h4>
                <div id="facets-{{field | safeId}}" class="collapse in">
                <table class="table table-hover table-condensed"
                    ng-init="fieldType = search.getFieldType(field)">
                    <tr ng-repeat="bucket in agg.buckets track by $index" ng-click="search.doNavigate(field, bucket.key)">
                        <td><a>{{bucket.key}}<em ng-if="bucket.key == ''">(empty)</em></a></td>
                        <td class="text-right"><span class="badge badge-default">{{bucket.doc_count}}</span></td>
                    </tr>
                    <tr ng-if="fieldType != 'string' && search.results.hits.total > search.countTotalDocCountOfBuckets(agg)">
                        <td><a><em>null</em></a></td>
                        <td class="text-right"><span class="badge badge-default">{{search.results.hits.total - search.countTotalDocCountOfBuckets(agg)}}</span></td>
                    </tr>
                </table>
                </div>
            </div>

        </div>
        <div class="col-xs-10 col-xs-offset-2 col-md-9 col-md-offset-3 main">
            <div class="pull-right">
	        <button type="button" class="btn btn-default"
	            ng-click='openModal({templateUrl:"search/search-debug-modal.html", size:"lg"})'
	            data-toggle="modal" data-target="#search-debug-modal"><i class="fa fa-cogs"></i></button>
	    </div>

            <!-- error and progress boxes -->
            <div class="alert alert-danger" ng-if="search.error">
                <p class="lead">Error: {{search.error.message}}</p>
                <p ng-bind-html="search.error.body"></p>
            </div>
            <div ng-if="search.queryRunning">
                <p class="lead">Searching <span ng-init="query = search.queryRunning" ng-include="'search/search-query.html'"></span></p>
                <p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;">
                            <span class="sr-only">In Progress</span>
                        </div>
                    </div>
                </p>
            </div>

            <div ng-if="!search.queryRunning">
                <!-- search results summary -->
                <p class="lead">
                    <span ng-if="! search.results.hits.total > 0">No results</span>
                    <span ng-if="search.results.hits.total > 0">
                        {{
                            search.query.body.from + 1                               | number
                        }}-{{
                            search.query.body.from + search.results.hits.hits.length | number
                        }} of {{search.results.hits.total | number}} results
                    </span>
                    <span ng-init="query = search.query" ng-include="'search/search-query.html'"></span>
                    <script type="text/ng-template" id="search/search-query.html">
                        for
                        <span ng-if="query._query_string">
                            [ <strong>{{query._query_string}}</strong> ]
                        </span>
                        <span ng-if="!query._query_string">everything</span>
                        <span ng-if="query.type"> in <em>{{query.type}}</em></span>
                        <span ng-if="query._source_query_string">
                            from <em>{{query._source_type}}</em>
                            matching
                            [ <strong>{{query._source_query_string}}</strong> ]
                        </span>
                    </script>
                </p>

                <!-- individual search results -->
                <ol start="{{search.query.body.from + 1}}">
                    <li ng-repeat="hit in search.results.hits.hits track by $index" class="hit">
                        <!-- provenance hyperlink -->
                        <p>
                            <!-- TODO routing param -->
                            <a ng-href="#/view/{{hit._index | urlEncode
                                    }}/{{hit._type | urlEncode
                                    }}?{{hit.parent ? 'parent=' + (hit.parent._id | urlEncode) + '&' : ''
                                    }}id={{hit._id | urlEncode
                                    }}"
                               class="text-muted">{{hit._type}}( {{hit._id}} ) in {{hit._index}}</a>
                        </p>

                        <!-- highlights, visualization -->
                        <blockquote>
                            <!-- highlight to hint why this is a result -->
                            <div ng-repeat="(field, highlight) in hit.highlight">
                                <strong class="text-muted">{{field}}:</strong>
                                <div ng-repeat="h in highlight track by $index">
                                    <div ng-if="$index > 0">...</div>
                                    <p ng-bind-html="h"></p>
                                </div>
                                <hr>
                            </div>

                            <!-- use custom per-type presentation templates -->
                            <p deepdive-visualized-data="hit" search-result="hit"></p>

                            <!-- raw data -->
                            <p show-raw-data="hit"></p>
                        </blockquote>
                    </li>
                </ol>
            </div>

            <!-- debug info in a modal -->
            <script type="text/ng-template" id="search/search-debug-modal.html">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="searchDebugModalLabel">Search Debug Info</h4>
                </div>
                <div class="modal-body">

                    <h3>query</h3>
                    <div show-raw-data="search.query" level="4"></div>

                    <h3>results</h3>
                    <div show-raw-data="search.results" level="3"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Close</button>
                </div>
            </script>
        </div>
    </div>
</div>
<style>
.sidebar {
    top: 70px;
    bottom: 90px;
    overflow-y: auto; 
}
.sidebar h4, .sidebar a {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.sidebar h4, .sidebar tr {
    cursor: pointer;
}

.hit blockquote .hlt1 { background-color: #ffc; }
.hit blockquote .hlt2 { background-color: #cff; }
.hit blockquote .hlt3 { background-color: #fcf; }
.hit blockquote .hlt4 { background-color: #ccf; }
.hit blockquote .hlt5 { background-color: #cfc; }
.hit blockquote .hlt6 { background-color: #fcc; }

[ng-hide=showJsonTree] {
    font-size: 13px;
    font-family: monospace;
}
</style>


<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="text-center">
            <pagination class="pagination-sm fa"
            total-items="search.results ? search.results.hits.total
                                        : search.params.p * search.params.n"
                                            items-per-page="search.params.n"
            ng-model="search.params.p"
            ng-model-options="{ debounce: 200 }"
            ng-change="search.doSearch(true)"
            previous-text="&#xf04a;" next-text="&#xf04e;" first-text="&#xf049;" last-text="&#xf050;"
            max-size="9" boundary-links="true"></pagination>
        </div>
    </div>
</nav>
<style>body { padding-bottom: 70px; }</style>
